<!DOCTYPE html>
<html>
  <head>
    <style>
      #aa {
        width: 100px;
        height: 100px;
        background: red;
        position: relative;
        animation: mymove 5s infinite;
        animation-play-state: running;

        /* Safari and Chrome */
        -webkit-animation: mymove 5s infinite;
        -webkit-animation-play-state: running;
      }

      @keyframes mymove {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }

      @-webkit-keyframes mymove /* Safari and Chrome */ {
        from {
          left: 0px;
        }
        to {
          left: 200px;
        }
      }
    </style>
  </head>
  <body>
    <p>
      <strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持
      animation-play-state 属性。
    </p>

    <div id="aa"></div>
    <script>
      setInterval(() => {
        document.getElementById('aa').style['animation-play-state'] = 'paused';
        document.getElementById('aa').style['-webkit-animation-play-state'] =
          'paused';
      }, 1000);
      setInterval(() => {
        document.getElementById('aa').style['animation-play-state'] = 'running';
        document.getElementById('aa').style['-webkit-animation-play-state'] =
          'running';
      }, 2000);
    </script>
  </body>
</html>
